<template>
  <div>
    <custom-dialog v-model:visible="isShowDialog">
      <div class="dialog-content">
        <div class="title">取物</div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <span class="form-title">取物人</span>
          <el-input v-model.trim="form.take_user_name"></el-input>
        </div>
        <div class="form-item">
          <span class="form-title">手机号</span>
          <el-input type="number" v-model.trim="form.take_mobile"></el-input>
        </div>
        <div class="form-item">
          <span class="form-title">取物位置</span>
          <el-input v-model.trim="form.take_location"></el-input>
        </div>
        <div class="form-item">
          <span class="form-title">数量</span>
          <el-input type="number" :min="1" v-model.trim="form.take_num"></el-input>
        </div>
        <div class="form-item">
          <span class="form-title">存物密码</span>
          <el-input type="password" v-model.trim="form.password"></el-input>
        </div>
      </div>
      <div class="receive-bottom-btn">
        <div class="cancel-btn" @click="onCancel">取消</div>
        <div class="confirm-btn" @click="onConfirm">确定</div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { userStorageTake } from '@/api/userStorage'
import { formTestFun, checkPhoneNumber } from '@/utils/toolsValidate'
import CustomDialog from '@/components/CustomDialog/Index.vue'

const props = defineProps({
  takeVisible: { type: Boolean, default: false },
  detailId: { type: String, default: '' }
})
const emit = defineEmits(['update:takeVisible', 'onConfirm'])

const isShowDialog = computed({
  get: () => props.takeVisible,
  set: val => emit('update:takeVisible', val)
})

const form = reactive({
  take_user_name: '',
  take_mobile: '',
  take_location: '',
  take_num: '',
  password: ''
})

function initData() {
  form.take_user_name = ''
  form.take_mobile = ''
  form.take_location = ''
  form.take_num = ''
  form.password = ''
}

function onCancel() {
  emit('update:takeVisible', false)
}

function onConfirm() {
  const testForm = {
    请输入取物人姓名: form.take_user_name,
    请输入手机号码: form.take_mobile,
    请输入正确的手机号码: checkPhoneNumber(form.take_mobile),
    请输入取物位置: form.take_location,
    请输入物品数量: form.take_num,
    请输入存物密码: form.password
  }
  if (formTestFun(testForm)) return
  const payload = { ...form, storage_id: props.detailId }
  userStorageTake(payload).then(res => {
    if (res.status === 200) {
      ElMessage.success('取物成功')
      emit('update:takeVisible', false)
      emit('onConfirm')
    }
  })
}

watch(
  () => isShowDialog.value,
  val => {
    if (val) initData()
  }
)
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    border-radius: 12px;
  }
  .el-input {
    width: 200px;
    height: 48px;
  }
}
.dialog-content {
  .title {
    font-size: 20px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #000000;
    margin-bottom: 10px;
  }
}
.form-box {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  width: 55vw;
  box-sizing: border-box;
  .form-item {
    display: flex;
    margin-right: 50px;
    align-items: center;
    margin-bottom: 20px;
    .symbol {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #7c0a03;
    }
    .form-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
      margin-right: 20px;
    }
  }
  .form-item-img {
    width: 100%;
    display: flex;
    align-items: center;

    .symbol {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #7c0a03;
    }
    .form-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
      margin-right: 20px;
    }
  }
}
.receive-bottom-btn {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
  .cancel-btn {
    width: 134px;
    height: 52px;
    line-height: 52px;
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 12px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    cursor: pointer;
  }
  .confirm-btn {
    width: 132px;
    height: 52px;
    background: #7c0a03;
    line-height: 52px;
    border-radius: 12px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    margin-left: 40px;
    cursor: pointer;
  }
}
</style>
